<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光溢彩</title>
    <link rel="stylesheet" href="picture.css">
    <link rel="icon" href="head.jpg" type="image/x-icon">
</head>

<body>
    <!-- <img src="head.jpg" alt=""> -->
    <nav>
        <div class="logo">无双</div>
        <ul class="nav-menu">
            <li onclick="redirectToIndex()">首页</li>
            <li onclick="redirectToRecords()">千秋万代</li>
            <li onclick="redirectToWorks()">碎片罅隙</li>
            <li onclick="redirectToPicture()">流光溢彩</li>
        </ul>

        <div class="burger">
            <div class="top-line"></div>
            <div class="middle-line"></div>
            <div class="bottom-line"></div>
        </div>
    </nav>

    <div class="box1">
        <div class="card-filp">
            <div class="back"><img src="photo/picture1.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture1.jpeg" alt=""></div>
          </div>
          
          <div class="card-filp">
            <div class="back"><img src="photo/picture2.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture2.jpeg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="photo/picture3.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture3.jpeg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="photo/picture4.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture4.jpeg" alt=""></div>
          </div>
    </div>

    <div class="box2">
        <div class="card-filp">
            <div class="back"><img src="photo/picture5.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture5.jpeg" alt=""></div>
          </div>
          
          <div class="card-filp">
            <div class="back"><img src="photo/picture6.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture6.jpeg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="photo/picture7.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture7.jpeg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="photo/picture8.jpeg" alt=""></div>
            <div class="front"><img src="photo/picture8.jpeg" alt=""></div>
          </div>
    </div>

    <!-- <div class="box3">
        <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
          
          <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
    </div>

    <div class="box4">
        <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
          
          <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
    
          <div class="card-filp">
            <div class="back"><img src="head.jpg" alt=""></div>
            <div class="front"><img src="head.jpg" alt=""></div>
          </div>
    </div> -->

    
    </div>
    
      
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>